<template>
  <div class="TopChart">
    <div id="main" style="width: 100%;height:500%;"></div>
  </div>
</template>

<script>
export default {
  name: "TopChart",

  data() {
    return {
      worldDatas: null
    }
  },
  created() {

  },
  mounted() {
    this.getDatas();
  },

  methods: {
    getDatas(){
      const _this = this;
      axios.get('http://localhost:8181/COVID/groupByCountry/1/10').then(function (resp) {
        _this.worldDatas = resp.data.content;
        _this.myEcharts()
      });
    },
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'));



      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '累计病例TOP10'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [this.worldDatas[0].country,this.worldDatas[1].country,this.worldDatas[2].country,this.worldDatas[3].country,this.worldDatas[4].country,
            this.worldDatas[5].country,this.worldDatas[6].country,this.worldDatas[7].country,this.worldDatas[8].country,this.worldDatas[9].country],
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [this.worldDatas[0].latestTotalCases,this.worldDatas[1].latestTotalCases,this.worldDatas[2].latestTotalCases,this.worldDatas[3].latestTotalCases,
            this.worldDatas[4].latestTotalCases,this.worldDatas[5].latestTotalCases,this.worldDatas[6].latestTotalCases,this.worldDatas[7].latestTotalCases,
            this.worldDatas[8].latestTotalCases,this.worldDatas[9].latestTotalCases],
          type: 'bar',
          barWidth: '60%',
          label: {
            show: true,
            position: 'top'
          }
        }]
      };



      window.onresize = function () {
        myChart.resize();
      };


      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>

</style>